<template>
    <div id="live">
        <LiveBar :names="names" @refreshData="onRefresh" @changefont="changeFont"></LiveBar>
        <div class="cover-img">
            <img :src="banner" alt="">
            <div class="logo">
                <img :src="logo" alt="">
                <div class="intro">
                    <p>www.aibinance.com</p>
                    <p>{{date|formatDate(3)}}</p>
                </div>
            </div>
            <span class="tip">币市有风险，投资需谨慎</span>
        </div>


            <van-pull-refresh v-model="isLoading" @refresh="onRefresh" class="content">
                <Notice></Notice>

                <div class="list-item" v-for="(l,index) in list" :key="index" :class="BigFont?'big':''">
                    <div class="title">
                        <span>【{{l.title}}】</span>
                        <span>{{l.time}}</span>
                    </div>
                    <div class="text" v-html="l.content">
                    </div>
                    <div class="img-box" v-if="l.type == 1">
                        <!--                    <img :src="banner" alt="">-->
                        <span></span>
                        <span class="dingyue" @click="tologin('/task/pay')">去订阅服务</span>
                    </div>
                </div>

            </van-pull-refresh>


    </div>
</template>

<script>
    import LiveBar from "../components/Live/LIveBar";
    import banner from "@/assets/img/bg_live.png"
    import logo from "@/assets/img/bg_logo1.png"
    import Notice from "@/components/Live/Notice";
    export default {
        name: "Live",
        components: {Notice, LiveBar},
        data(){
            return {
                names:'直播',
                banner:banner,
                logo:logo,
                list:[],
                isLoading: false,
                page:1,
                date:new Date(),
                BigFont:false
            }
        },
        mounted(){
            this.getData()
        },
        methods: {
            onRefresh() {
                this.page=1
                this.list = []
                this.getData()
                setTimeout(() => {
                    this.$toast('刷新成功');
                    this.isLoading = false;
                }, 500);
            },
            getData(){
                this.$api.live.Showlist(this.getCookie('token'),this.page).then(res=> {
                    // 执行某些操作

                    for(const l of res.data.data.list){
                        this.list.push(l)
                    }
                })
            },
            changeFont(){
                this.BigFont = !this.BigFont
            }
        }
    }
</script>

<style scoped>
    .cover-img{
        position: fixed;
        top: 3rem;
        width: 100%;
        height: 10.6rem;
        display: inline-block;
        left: 0;
        right: 0;
        z-index: 1;
    }
    .cover-img>img{
        width: 100%;
        object-fit: cover;
        display: block;
        height: 100%;
    }
    .logo{
        position: absolute;
        top: 1rem;
        left: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 3.5rem;
        width: 10rem;
    }
    .tip{
        position: absolute;
        bottom: 1rem;
        left: 1.5rem;
        font-size:0.69rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        opacity: 0.5;
    }
    .logo img{
        width: 2.13rem;

    }
    .logo .intro{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        height: 80%;
        flex: 1;
    }
    .logo .intro p{
        width: 100%;
        text-align: left;
        padding-left: 1rem;
    }
    .logo .intro p:nth-child(1){
        font-size:0.75rem;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(255,255,255,1);
    }
    .logo .intro p:nth-child(2){
        font-size:0.69rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(20,163,101,1);
    }
    .content{
        position: absolute;
        top: 13.6rem;
        left: 0;
        right: 0;
        /*bottom: 0;*/
        z-index: 0;
        margin-bottom: 5rem;
    }
    .list-item:first-child{
        margin-top: 0.5rem;
    }
    .list-item{
        background: #fff;
        border-bottom:1px solid #eee;
        padding: 0.5rem;

    }
    .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    .title span:nth-child(1){
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(20,163,101,1);
        text-align: left;
    }
    .title span:nth-child(2){
        font-size:0.69rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);
        text-align: left;
    }
    .text{
        padding: 0.5rem 0.5rem;
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:1.19rem;
        text-align: left;

    }
    .img-box{
        padding:0 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .img-box img{
        width: 50%;
    }
    .dingyue{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0.5rem 0;
        float: right;
        width:5.38rem;
        height:1.25rem;
        background:rgba(117,216,173,1);
        font-size:0.81rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
    }
</style>
<style>
    #live .van-pull-refresh__track{
        height: 100%;
    }
    #live .text img{
        width: 100%;
        height: auto;
    }
    #live .big .title span:nth-child(1){
        font-size: 1.12rem;
    }
    #live .big .title span:nth-child(2){
        font-size: 0.75rem;
    }
    #live .big .text{
        font-size: 0.94rem;
    }
</style>